<script type="text/javascript" >
    stFacebookToolbox.load_tooltip();
    stFacebookToolbox.on_submitform('#stFacebookToolboxForm', function(data){
        stFacebookToolbox.loadPage('facebook_image_map', '', '<?php _e("Successful", $config['plugin_name']) ?>');
    });
    stFacebookToolbox.loadUploadButton('520');
    stFacebookToolbox.loadRemoveButton();
    jQuery('img#image_image').imgAreaSelect({ handles: true, onSelectChange: function(img, selection){
                                   jQuery("#x1").val(selection.x1);
                                   jQuery("#x2").val(selection.x2);
                                   jQuery("#y1").val(selection.y1);
                                   jQuery("#y2").val(selection.y2);
                                   jQuery("#width").val(selection.width);
                                   jQuery("#height").val(selection.height);
                                    }});
   jQuery("a[rel^='prettyPhoto']").prettyPhoto();
</script>
<style>
    #stcontainer form.stform ul li img.preview {
    border: 2px solid #D8D8D8;
    float: left;
    margin: 3px;
    padding: 5px;
    width: 100%;
}
</style>
<div class="w100p bgl">
    <div class="w100p bgr p5b">
        <ul class="menu_right">
                      <li>
                           <a href="javascript:void(0);" onclick="stFacebookToolboxcustom.loadPage('applications');" id="form_app">Form app</a>
                    </li>
                    <li class="current">
                          <a href="javascript:void(0);" onclick="stFacebookToolboxcustom.loadPage('facebook_image_map');" id="fan_count">Info Page app</a>
                    </li>
          </ul>
                <p></p>
        <form class="stform" id="stFacebookToolboxForm" action="<?php echo admin_url('/admin.php?page=' . $config['plugin_name'] . '&action=' . $current_action) ?>" method="post" >
            <a href="#inline_demo" rel='prettyPhoto'><img src="<?php echo $config['imagesUrl']?>info2.png" style="float:right;margin-top: -54px;" /></a>
            <ul>
                <li>
                        <label style="width:70px;">&nbsp;</label>
                        <div style="width:520px;">
                         <?php
                        $class_hide = "hide";
                        if (($option['image']) != '') {
                            $upload_data = wp_upload_dir();
                            $image = explode('/wp-content/',$option['image']);
                            $image = '../wp-content/'.$image[1];
                            $stplugin_picture_url = $upload_data['url'] . '/' . $option['image'];
                            $stplugin_picture_dir = $upload_data['path'] . '/' . $option['image'];
                            $class_hide = "";
                            $image = substr($image,0,-4).'-thumb'.substr($image,-4);
                        }
                        ?>
                            <input value="<?php echo $option['image']; ?>" class="" name="image" id="id_image" type="hidden"/>
	                        <div class="upload_button_div">
	                            <span id="image" class="button image_upload_button">Upload Image</span>
	                            <span pictureID="image" id="reset_image" class="button image_reset_button <?php echo $class_hide ?>">Remove</span>
	                        </div>
                            <?php
                        if (($option['image']) != '') {
                        ?>
                            <img alt="" src="<?php echo $image;?>" id="image_image" class="hide preview" style="display: inline;width:100%" />
                            
                        <?php }
                            foreach($result as $row){
                            $array =  explode(':',$row->begin);?>
                            <div style="background:none;position: absolute; border: 1px dashed #FFF; margin-top: <?php echo $array[1];?>px; margin-left: <?php echo $array[0];?>px; width: <?php echo $row->width;?>px; height: <?php echo $row->height;?>px;color:#FFFFFF;" ><?php echo $row->title;?> - <span onclick="window.open('<?php echo $row->link;?>');" style="cursor:pointer;">View</span> - <span onclick="stFacebookToolboxcustom.delete_facebook_map(<?php echo $row->id;?>);" style="cursor:pointer;">Delete</span></div>
                            <?php }
                            ?>
                        </div>
                        <br clear="both" />
                    </li>
                   
                    <li>
                        <input type="hidden" name="data[x1]" id="x1" />
                        <input type="hidden" name="data[y1]" id="y1" />
                        <input type="hidden" name="data[x2]" id="x2" />
                        <input type="hidden" name="data[y2]" id="y2" />
                        <input type="hidden" name="data[width]" id="width" />
                        <input type="hidden" name="data[height]" id="height" />
                        <label style="width:70px;">Title</label>
                        <div>
                        <input type="text" name="data[title]" id="title" />
                        </div>
                        <br clear="both" />
                    </li>
                     <li>
                        <label style="width:70px;">URL</label>
                        <div>
                        <input type="text" name="data[url]" id="url" />
                        </div>
                        <br clear="both" />
                    </li>
                    <li>
                        <input type="submit" value="Submit"/>
                    </li>

            </ul>
          
        </form>
    </div><div id="inline_demo" style="display:none;">
                        <span style="color: red; font-weight: bold; font-size: 11pt;">Help</span>
						<p></p>
						<table border="0" cellpadding="0" cellspacing="5" align="center" width="100%">
						<?php foreach($config['help']['facebook_image_map'] as $row):?>
						<tr>
							<td style="width:230px;" valign="top">
							<?php echo $row['title'];?><span style="float:right;">:</span>
							</td>
							<td valign="top" style="padding-left:5px;">
								<?php echo $row['help'];?>
							</td>
						</tr>
						<?php endforeach;?>

	</table>
	</div>
</div>